<template>
    <div>
        <el-card>
            <el-row>
                <el-col :span="8" class="chartDiv">
                    <pie eId="temperature" title="2018实验室开放数量" colorArr="0,255,0" :chartData='pieData'></pie>
                </el-col>
                <el-col :span="16" class="chartDiv">
                    <line-bar eId="temperature2" title="2018月预约人次分布" colorArr="0,255,0" :xAxisData='lineData.createTime' :chartData='lineData.temperature'></line-bar>
                </el-col>
                <!-- <el-col :span="8" class="chartDiv">
                    <line-bar eId="temperature3" title="2018折线图" colorArr="124,54,69" :xAxisData='lineData.createTime' :chartData='lineData.temperature'></line-bar>
                </el-col> -->
                <el-col :span="24" class="chartDiv">
                    <line-bar eId="temperature4" title="2018实验室预约人次分布" colorArr="204,54,69" :xAxisData='lineData.createTime' :chartData='lineData.temperature'></line-bar>
                </el-col>
            </el-row>
        </el-card>
    </div>
</template>
<script>
import LineBar from '@/components/echarts/line-bar.vue'
import Pie from '@/components/echarts/pie.vue'
import request from '@/utils/request'

export default {
  components: {
    LineBar, Pie
  },
  data() {
    return {
      lineData: {
        createTime: [1, 2, 3, 4],
        temperature: [1, 2, 3, 4]
      },
      pieData: [
        { value: 10, name: '已交' },
        { value: 3, name: '未交' }
      ]
    }
  },
  mounted() {
    // 查询系统使用情况
    request.get('/items/labAppointments/lineData').then(res => {
      // 声明月份
      const xAxisData = new Array(12).fill(0)
      xAxisData.forEach((element, index) => {
        xAxisData[index] = index + 1
      })
      // 实际数据
      const seriesData = new Array(12).fill(0)
      res.content.forEach((element, index) => {
        // xAxisData[element.month - 1] = element.month
        seriesData[element.month - 1] = element.count
      })
      this.lineData.createTime = xAxisData
      this.lineData.temperature = seriesData
    })
  }
}
</script>
<style>
.chartDiv {
    min-height: 360px;
}
</style>
